<style lang="less">
</style>

<template>
  <div>
    <Card>
      <p slot="title" style="height: 36px">
        <Row>
          <Col>
            <Button @click="toBack" size="large" type="ghost" icon="ios-skipbackward"></Button>
            <DatePicker v-model="month" transfer type="month" placeholder="请选择月份" size="large" style="width: 200px"></DatePicker>
            <Button @click="toNext" size="large" type="ghost" icon="ios-skipforward"></Button>
            <Select v-model="userId" placeholder="请选择医护" clearable filterable transfer size="large" style="width:120px">
              <Option :value="0" :key="0">查询全部</Option>
              <Option v-for="item in users" :value="item.id" :key="item.id">{{ item.username }}</Option>
            </Select>
             <Button type="info " @click="exportCurrent">导出</Button>
          </Col>
        </Row>
      </p>
      <div style="height: 680px;overflow: scroll" id = "export">
        <table style="width: 4000px;" cellpadding="0" cellspacing="0">
          <tr>
            <td v-for="item in colums1" style="width: 80px;height: 40px;border: 1px solid #dfe6ec;background-color: #eef1f6">
              <p align="center">{{item.title}}</p>
            </td>
          </tr>
        </table>
        <table style="width: 4000px;" cellpadding="0" cellspacing="0">
          <tr>
            <td v-for="item in colums2" style="width: 80px;height: 40px;border: 1px solid #dfe6ec;background-color: #eef1f6">
              <p align="center">{{item.title}}</p>
            </td>
          </tr>
        </table>
        <table v-for="items in data" style="width: 4000px;" cellpadding="0" cellspacing="0" >
          <tr>
            <td v-for="item in items" style="width: 80px;height: 40px;border: 1px solid #dfe6ec;">
              <p align="center">{{item.title}}</p>
            </td>
          </tr>
        </table>
      </div>
    </Card>
  </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        data () {
            return {
                baseURL: '/user/statistics',
                month: '',
                colums1: [],
                colums2: [],
                data: [],
                exportList: [],
                userId: '0',
                users: []
            };
        },
        methods: {
            search () {
                let url = this.baseURL + '/reservation/' + this.month + '/' + this.userId
                this.$ajax.get(url).then(r => {
                    let {code, data, msg} = r.data
                    if (code === 0) {
                        this.colums1 = data.colums1
                        this.colums2 = data.colums2
                        this.data = data.data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            toBack () {
                this.month = this.$moment(this.month).subtract(1, "months").format("YYYY-MM")
            },
            toNext () {
                this.month = this.$moment(this.month).add(1, "months").format("YYYY-MM")
            },
            loadUser () {
                this.$ajax.get('/user/loadUser').then(r => {
                    let {code, data, msg} = r.data
                    if (code === 0) {
                        this.users = data
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            init () {
                this.loadUser()
                this.month = this.$moment().format('YYYY-MM')
                this.search()
            },
            exportCurrent:function(){
              var wb = XLSX.utils.table_to_book(document.querySelector('#export')) //表格id
              var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
              try {
                  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '预约统计表'+　 this.month + '.xlsx')  //文件名
              } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }

              return wbout
          }
        },     
        mounted () {
            this.init()
        },
        watch: {
            '$route' (to) {
                if (to.path === '/statistics/reservation') {
                    this.init()
                }
            },
            month: function (val, oldVal) {
                this.month = this.$moment(val).format("YYYY-MM")
                this.search()
            },
            userId: function (val, oldVal) {
                if (val === '') {
                    this.userId = 0
                }
                this.search()
            }
        }
    }
</script>

<style>

</style>
